<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="A datavisualization tool that leads you from your data to the graphic you need." content="">
    <meta name="Yan Holtz & Conor Healy" content="">

    <title>About the Data to Viz Project</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
    <link rel="icon" href="img/logo/data-to-viz.ico">

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- JQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

  </head>

  <body id="page-top">

    <!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
    <script>
      $(function(){
        $("#mainNav").load("menu.html");
      });
    </script>







<!-- --------------------------- Title and button ------------------------------------------------------------------- -->

    <section class="bg-light" id="head" style="padding-bottom: 0px">
      <div class="container">


        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">about data to viz</h2>
            <h3 class="section-subheading text-muted">How and why we built the project</h3>
            <p>
              <a class="btn btn-primary js-scroll-trigger" href="#presentation" >Presentation</a>
              <a class="btn btn-primary js-scroll-trigger" href="#tools" >Tools</a>
              <a class="btn btn-primary js-scroll-trigger" href="#history" >History</a>
              <a class="btn btn-primary js-scroll-trigger" href="#acknowledgment" >Acknowledgment</a>
            <p>
            <br>
          </div>
        </div>
        <br>
      </div>
    </section>



<!-- --------------------------- Presentation  ------------------------------------------------------------------- -->

    <section id="presentation" class="" style="padding-bottom: 50px; padding-top: 50px">
      <div class="container">

        <div class="row" style="text-align: justify; margin-top: 40px; margin-bottom: 40px">
           <div class="col-lg-4">
            <p><a href="https://www.data-to-viz.com">From Data to Viz</a> is a classification of chart types based on input data format. It comes in the form of a decision tree leading to a set of potentially appropriate visualizations to represent the dataset.</p>

            <p>The project is built on two underlying philosophies. <i>First</i>, that most data analysis can be summarized in about twenty different dataset formats. <i>Second</i>, that both data and context determine the appropriate chart.</p>
          </div>
          <div class="col-lg-4">
            <p>Thus, our suggested method consists in identifying and trying all feasible chart types to find out which suits your data and idea best.</p>
            <p>Once this set of graphics is identified, <a href="https:///www.data-to-viz.com">data-to-viz.com</a> aims to guide you toward the best decision. It also provides a list of common caveats to avoid and always provides a reproducible code snippet in the <a href="https://www.r-graph-gallery.com">R programming language</a>.</p>

          </div>
          <div class="col-lg-4">
            <p>Dataviz is a world with endless possibilities and this project does not claim to be exhaustive. However, it should provide you with a good starting point.</p>
            <center><img src="img/logo/tree-s.png" style="width:55%; height:55%"></center>
          </div>
       </div>

      </div>
    </section>




<!-- --------------------------- Subscribe Form  ------------------------------------------------------------------- -->
<section id="form" class="bg-light" style="padding-bottom: 150px; padding-top: 150px">
  <div class="container">
    <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
      <div style="max-width: 600px; text-align: center;">
        <h2>❤️ Enjoying the project? ❤️</h2>
        <p>Dive deeper into the world of data visualization with <i>Dataviz Universe</i>, my newsletter packed with <b>actionable tips and tricks</b> to enhance your data storytelling skills.</p>
        <div style="margin-top: -50px; width: 100%; display: flex; justify-content: center;">
          <script async data-uid="8010f15fd2" src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"></script>
        </div>
      </div>
    </div>
  </div>
</section>






<!-- --------------------------- TOOLS  ------------------------------------------------------------------- -->

    <a name="toolsanchor"></a>
    <section class="" id="tools" style="background-color:#69b3a2; padding: 0px 0; padding-top: 0px">
      <div class="parallaxstory">
        <div class="container">

          <div class="row text-center" style="padding-top: 10%; text-align: center">
            <div class="col-lg-12 text-center">
              <h3 class="section-subheading text-muted">How is built this website?</h3>
              <br>
            </div>
          </div>

          <div class="row text-center">
            <div class="col-lg-4 col-md-6 text-center">
              <h2 class="text-uppercase" style="border-bottom: solid; border-width: 1px">Website</h2>
              <p style="color: grey">Data to viz is based on a <a href="https://startbootstrap.com/template-overviews/agency/">bootstrap template</a> and hosted on <a href="https://github.com/holtzy/data_to_viz">github</a>. Logos, trees and poster have been made by <a href="http://www.conor.fr">Conor Healy</a> and animated using CSS and <a href="https://d3js.org">D3.js</a>.</p>
            </div>

            <div class="col-lg-4 col-md-6 text-center">
              <h2 class="text-uppercase"  style="border-bottom: solid; border-width: 1px">Content</h2>
              <p style="color: grey">The vast majority of the pages of this website are built using <a href="https://rmarkdown.rstudio.com">R Markdown</a> with the <a href="https://www.rstudio.com">R studio</a> IDE. Dataset used in example are all listed in this <a href="https://github.com/holtzy/data_to_viz/tree/master/Example_dataset">github repository</a>.</p>
            </div>

            <div class="col-lg-4 col-md-6 text-center">
              <h2 class="text-uppercase"  style="border-bottom: solid; border-width: 1px">Graphics</h2>
              <p style="color: grey">All analysis are made using the <a href="https://www.tidyverse.org">tidyverse</a>, notably <a href="https://dplyr.tidyverse.org">dplyr</a> and <a href="https://www.r-graph-gallery.com/portfolio/ggplot2-package/">ggplot2</a>. Interactive graphics are made using <a href="https://www.htmlwidgets.org/">html widgets</a>, notably <a href="https://plot.ly/">plotly</a> and its <a href="https://www.r-graph-gallery.com/interactive-charts/">ggplotly</a> function.</p>
            </div>

           </div>
        </div>
      </div>
    </section>







<!-- --------------------------- History ------------------------------------------------------------------- -->

    <a name="historyanchor"></a>
    <section id="history" class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Graphic classification history</h2>
            <h3 class="section-subheading text-muted">From data to viz is not the first project aiming to classify the different form of data visualization. Here is a quick overview of this history:.</h3>
          </div>
        </div>
        <div class="slideshow-container">
          <div class="mySlides">
            <center><img src="img/history/Anne_K-Ermy_guide.png" style="height:400px"></center>
            <div style="text-align: center; margin-top:10px">2017 | <a href="http://annkemery.com/portfolio/your-guide-to-great-graphs/">Your guide to great graphs</a> by <i>Ann K. Emery</i> is a two pages poster that outlines 42 great graphs that showcase trends over time, by geography, and more. Note that an <a href="http://annkemery.com/essentials/">interactive version</a> is available.</div>
          </div>
          <div class="mySlides">
            <center><img src="img/history/chartguide.jpg" style="height:400px"></center>
            <div style="text-align: center; margin-top:10px">2016 | <a href="http://chart.guide/news/">The chart guide</a> by <i>Michiel Dullaert</i>. Initially created to help students choose the right chart.</div>
          </div>
          <div class="mySlides">
            <center><img src="img/history/Visual-vocabulary.png" style="height:400px"></center>
            <div style="text-align: center; margin-top:10px">2015 | <a href="https://github.com/ft-interactive/chart-doctor/tree/master/visual-vocabulary">The visual vocabulary</a> by the <i>Financial Times Visual Journalism Team</i>. Aims to assist designers and journalists to select the optimal symbology for data visualisations. A interactive version is also <a href="http://ft-interactive.github.io/visual-vocabulary/">available</a>.</div>
          </div>
          <div class="mySlides">
            <center><img src="img/history/the-graphic-continuum.jpg" style="height:400px"></center>
            <div style="text-align: center; margin-top:15px">2014 | <a href="https://policyviz.com/2014/09/09/graphic-continuum/">The graphic continuum</a> by <i>John Swabish</i> and <i>Severinno Ribecca</i>. Described as a view of the many different types of visualizations available to us when we encode and present data. This poster got a <a href="https://www.informationisbeautifulawards.com/">Information Is Beautiful</a> award.</div>
          </div>
          <div class="mySlides">
            <center><img src="img/history/classification-chart-types.png" style="height:400px"></center>
            <div style="text-align: center; margin-top:10px">2013 | <a href="http://excelcharts.com/classification-chart-types/">A classification of chart types</a> by <i>Jorge Camoes</i>. This classification includes only charts that can be made using excel.</div>
          </div>
          <div class="mySlides">
            <center><img src="img/history/infography1.png" style="height:400px"></center>
            <div style="text-align: center; margin-top:15px">2006 | <a href="http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html">The Chart Chooser</a> by <i>Dr. Abela</i>. A simple representation that is part of the <a href="https://extremepresentation.com/">extreme presentation method</a>. This representation has been criticized by <a href="https://www.perceptualedge.com/blog/?p=2080">Stephen Few</a>, and discussed by many people in the comment section.</div>
          </div>
          <div class="mySlides">
            <center><img src="img/poster/poster_screenshot.png" style="height:400px"></center>
            <div style="text-align: center; margin-top:10px">2018 | <a href="https://www.data-to-viz.com">From data to viz</a> by <i>Yan Holtz</i> and <i>Conor Healy</i> is a new approach aiming to classify chart types according to their input format. </div>
          </div>
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
          <span class="dot" onclick="currentSlide(5)"></span>
        </div>
        <br>
      </div>

    </section>

    <script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
    }
    </script>






 <!-- --------------------------- ACKNOWLEDGMENT ------------------------------------------------------------------- -->

 <section id="acknowledgment" class="" style="padding-bottom: 50px; padding-top: 50px">
      <a name="acknowledgmentanchor"></a>
     <div class="container">
       <div class="row">
         <div class="col-lg-2 text-center"></div>
         <div class="col-lg-8 text-center">
           <br><br><br>
           <h2 class="section-heading text-uppercase" style="color: black">Acknowledgment</h2>
           <h3 class="section-subheading text-muted">This project would not exist without several blogs and website I consult on a daily basis. Even if they are not necessarily cited as sources, they are an essential source of inspiration.</h3>
           <br>
         </div>
       </div>

       <div class="row">
         <div class="col-lg-4">
          <h3 style="border-bottom: solid; border-width: 1px; padding-bottom: 5px; margin-bottom: 20px">Websites</h3>
          <ul>
            <li><a href="http://r4ds.had.co.nz">R for Data Science</a> by <i>Garrett Grolemund</i> and <i>Hadley Wickham</i>.</li><br>
            <li><a href="https://www.visualcinnamon.com">Visual Cinnamon.com</a> by <i>Nadieh Bremer</i></li><br>
            <li><a href="http://www.storytellingwithdata.com">Story telling with data</a> by <i>Cole Nussbaumer Knaflic</i></li><br>
            <li><a href="https://www.r-bloggers.com">R Bloggers</a> by <i>Tal Galili</i></li><br>
            <li><a href="http://truth-and-beauty.net">Truth and Beauty</a> by <i>Moritz Stefaner</i></li><br>
            <li><a href="https://blog.datawrapper.de">Chartable</a> by <i>Datawrapper</i>, especially the <a href="https://blog.datawrapper.de/category/thoughts-how-to-s/">what to consider when</a> section by <i>Lisa Charlotte Rost</i></li><br>
            <li><a href="https://www.informationisbeautifulawards.com">Information is beautiful</a> by so many talented people</li><br>
            <li><a href="http://viz.wtf">WTF visualizations</a> for inspiration</li><br>
            <li><a href="http://www.visualisingdata.com">Visualising data</a> by <i>Andy Kirk</i></li><br>
            <li><a href="http://flowingdata.com">Flowing data</a> by <i>Nathan Yau</i></li><br>
          </ul>
         </div>

         <div class="col-lg-4">
          <h3 style="border-bottom: solid; border-width: 1px; padding-bottom: 5px; margin-bottom: 20px">R packages</h3>
          <ul>
            <li>dplyr, tidyr and others from the <a href="https://www.tidyverse.org">tidyverse</a> for data preparation</li><br>
            <li><a href="https://ggplot2.tidyverse.org/">ggplot2</a> for the vast majority of the graphics, together with the <a href="https://github.com/hrbrmstr/hrbrthemes">hrbrtheme</a> for styling</i></li><br>
            <li><a href="https://github.com/thomasp85/patchwork">patchwork</a> to put graphics together</li><br>
            <li><a href="https://github.com/thomasp85/ggraph">ggraph</a> and igraph for most of the network related graphics</li><br>
            <li><a href="https://www.r-graph-gallery.com/interactive-charts/">plotly</a> and other <a href="https://www.htmlwidgets.org">html widgets</a> for interactive graphics</li><br>
            <li><a href="https://rmarkdown.rstudio.com">R Markdown</a> to build 95% of the website, together with this <a href="https://holtzy.github.io/Pimp-my-rmd/">list of tips</a>.</li><br>
            <li><a href="https://github.com/cran/RColorBrewer">RColorBrewer</a> and <a href="https://github.com/sjmgarnier/viridis">viridis</a> and colormap to control color in charts.</li><br>
            <li><a href="https://github.com/slowkow/ggrepel">Ggrepel</a> and other <a href="http://www.ggplot2-exts.org/gallery/">ggplot2 extension</a> that make your life simpler.</li><br>
            <li><a href="https://github.com/talgalili/heatmaply">Heatmaply</a> for most of the heatmaps</li><br>
          </ul>
         </div>

         <div class="col-lg-4">
          <h3 style="border-bottom: solid; border-width: 1px; padding-bottom: 5px; margin-bottom: 20px">People</h3>
          <ul>
            <li>Feedbacks and encouragements: <i>M. <a href="https://www.linkedin.com/in/mélanie-doffagne-6404b775/">Doffagne</a>, G. <a href="https://www.linkedin.com/in/guilhem-marre-42132b28/">Marre</a>, T. <a href="https://www.linkedin.com/in/thibaut-deplanche/?locale=en_US">Déplanche</a>, A. Courtiol, V. <a href="https://sites.google.com/site/ranwez/">Ranwez</a>, M. <a href="http://masalmon.eu">Salmon</a></i> </li><br>
            <li>Web knowledge: <i>G. <a href="https://www.linkedin.com/in/guillaume-debreu-7b360b125/">Debreu</a></i></li><br>
            <li>Website building: <i>T. <a href="https://github.com/hipyhop">Luff</a></i></li><br>
            <li>Text and general advices: <i>C. <a href="https://researchers.uq.edu.au/researcher/15031">Bradley</a>.</i><br>
            <li>Multiple pull requests for english correction: <i>M. <a href="https://www.linkedin.com/in/mcsamuel/">Samuel</a>.</i><br>

          </ul>
         </div>

       </div>

      </div>
    </section>


<!-- --------------------------------------------------------------------------------------------- -->




















<!-- --------------------------- FOOTER SECTION ------------------------------------------------------------------- -->
    <footer class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; from Data to Viz 2018</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

<!-- ---------------------------------------------------------------------------------------------- -->





<script>
// --------------------------------------------------------------------------------------------------------------------------------- //
// A script to select charts based on their tag //
// --------------------------------------------------------------------------------------------------------------------------------- //
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
// --------------------------------------------------------------------------------------------------------------------------------- //
</script>













<!-- ------------------------ JAVASCRIPT SECTION ----------------------------- -->



    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
	$(function () {
  		$('[data-toggle="tooltip"]').tooltip()
	})
	</script>


    <!-- Script for animated portfolio with filter. Found here: https://codepen.io/pramodkumarboda/pen/XdgxmQ -->
    <script>
  	$(window).load(function(){
  	    var $container = $('.portfolioContainer');
  	    $container.isotope({
  	        filter: '*',
  	        animationOptions: {
  	            duration: 750,
  	            easing: 'linear',
  	            queue: false
  	        }
  	    });

  	    $('.portfolioFilter a').click(function(){
  	        $('.portfolioFilter .current').removeClass('current');
  	        $(this).addClass('current');

  	        var selector = $(this).attr('data-filter');
  	        $container.isotope({
  	            filter: selector,
  	            animationOptions: {
  	                duration: 750,
  	                easing: 'linear',
  	                queue: false
  	            }
  	         });
  	         return false;
  	    });
  	});
	</script>




    <!-- Script to give a specific URL to every Modal. TODO: improve it with https://stackoverflow.com/questions/34154370/bootstrap-3-x-how-to-have-url-change-upon-clicking-modal-trigger -->
    <script>
      $(document).ready(function(){
        $(window.location.hash).modal('show');
        $('a[data-toggle="modal"]').click(function(){
           window.location.hash = $(this).attr('href');
        });
      });

      $('button[data-dismiss="modal"]').click(function(){
           var original = window.location.href.substr(0, window.location.href.indexOf('#'))
           history.replaceState({}, document.title, original);
       });

      $(window.location.hash).modal('show');
      $('a[data-toggle="modal"]').click(function(){
          window.location.hash = $(this).attr('href');
      });

      function revertToOriginalURL() {
          var original = window.location.href.substr(0, window.location.href.indexOf('#'))
          history.replaceState({}, document.title, original);
      }

      $('.modal').on('hidden.bs.modal', function () {
          revertToOriginalURL();
      });

  </script>


  <script>
    $('.tip').each(function () {
      $(this).tooltip(
      {
        html: true,
          title: $('#' + $(this).data('tip')).html()
      });
    });
  </script>


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-79254642-3');
</script>
<script>
var getOutboundLink = function(url) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': url,
    'transport_type': 'beacon',
    'event_callback': function(){document.location = url;}
  });
}
</script>


<!----------------------------------------------------------------------------------------------- -->







  </body>

</html>
